<template>
  <!-- 新增、修改弹框 -->
  <el-dialog :visible.sync="dialogVisible" :title="form.id?'修改消息':'新增消息'" width="750px" :close-on-click-modal="false" @close="close">
    <div>
      <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm">
        <el-form-item label="关键词" prop="keyword">
          <el-input v-model="form.keyword" placeholder="请输入关键词（长度不超过30字符）"></el-input>
        </el-form-item>
        <p class="textC">
          温馨提示：如果关键字为
          <strong>subscribe</strong>，那么此消息为订阅消息
        </p>
        <div class="textL"></div>
        <el-form-item label="回复内容" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 15}"
            v-model="form.content"
            placeholder="请输入回复内容（长度不超过300字符）"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" round @click="hide">取 消</el-button>
      <el-button size="small" round type="primary" @click="handleSubmit('form')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { validateStrLen } from "@/utils/validate.js";
  import { addReply } from "@/api/wechat.js";
  export default {
    props: {},
    data() {
      /**
       * 表单校验方法相关
       */
      // 关键字
      const validateKeyword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入关键字"));
        } else if (!validateStrLen(value, 30)) {
          callback(new Error("长度不超过15个汉字或30个字符"));
        } else {
          callback();
        }
      };
      // 回复消息内容
      const validateContent = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入回复消息内容"));
        } else if (!validateStrLen(value, 300)) {
          callback(new Error("长度不超过150个汉字或300个字符"));
        } else {
          callback();
        }
      };
      return {
         /**
         * 表单校验字段相关
         */
        rules: {
          keyword: [
            {
              required: true,
              validator: validateKeyword,
              trigger: ["blur", "change"]
            }
          ],
          content: [
            {
              required: true,
              validator: validateContent,
              trigger: ["blur", "change"]
            }
          ]
        },
        dialogVisible: false,
        resolve: null,
        reject: null,
        form:  {
            keyword: "",
            content: "",
            type: "text"
          }
      };
    },
    methods: {
      open(type, item) {
        if (type === "edit") {
          this.form = item;
        }
        this.show();
        return new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
      },

      show() {
        this.dialogVisible = true;
      },

      close() {
        this.form= {
            keyword: "",
            content: "",
            type: "text"
          }
        this.$refs.form.resetFields();
      },

      hide() {
        this.resolve = null;
        this.reject = null;
        this.dialogVisible = false;
      },

      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            addReply(this.form).then(res => {
              if (this.form.hasOwnProperty("id")) {
                this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                  duration: 2000,
                  offset: 40
                });
              } else {
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success",
                  duration: 2000,
                  offset: 40
                });
              }
              this.resolve && this.resolve();
              this.hide();
            });
          } else {
            return false;
          }
        });
      }
    }
  };
</script>
